// 基本信息
import DialogBox from "@/components/DialogBox";
import LazyUploadFile from "@/components/Upload/LazyUploadFile.vue";
import { generateSn } from "@/utils/util";
import { ElForm, ElInput } from "element-plus";
import { defineComponent, PropType } from "vue";
interface DeviceForm {
	id: string;
	sn: string;
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const uploadEl = ref();
		const formRule = reactive({
			sn: [{ required: true, message: "请输入转发插件SN", trigger: "change" }]
		});

		const validData = () => {
			uploadEl.value.submit({ id: props.detail.id });
			formRef.value?.validate(valid => {
				if (valid) {
					emit("submit");
				}
			});
		};
		onMounted(() => {});
		// 监听enter事件（调用登录）
		type InputInstance = InstanceType<typeof ElInput>;
		const addInputRef = ref<InputInstance>();
		const newTagState = reactive({
			visible: false,
			inputVal: ""
		});
		document.onkeydown = (e: any) => {
			e = window.event || e;
			if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
				addTag();
			}
		};
		const addTag = () => {
			if (!newTagState.inputVal) {
				return;
			}
			if (!props.detail.tags) {
				props.detail.tags = "";
			}
			props.detail.tags += "," + newTagState.inputVal;
			newTagState.inputVal = "";
			newTagState.visible = false;
		};
		return () => {
			return (
				<DialogBox {...attrs} onConfirm={() => validData()} width={props.width} title={props.title}>
					<div class="flex">
						<div class="w-52 pr-4">
							<LazyUploadFile
								title={!props.detail.sn ? "请输入转发插件名称" : "点击选择转发插件程序"}
								ref={uploadEl}
								disabled={!props.detail.sn}
								v-model:fileUrl={props.detail.progrom}
								v-model:fileName={props.detail.progrom}
								width="100%"
								height="200px"
								emptyTips="请上传转发插件程序"
							></LazyUploadFile>
						</div>
						<div class="flex-1 pr-8">
							<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
								<el-form-item label="插件名称" prop="name">
									<el-input v-model={props.detail.name} disabled={props.detail.id ? true : false}>
										{{
											append: () => {
												return props.detail.id ? null : (
													<el-button type="primary" link onClick={() => (props.detail.sn = generateSn())}>
														<span class="text-sm p-1 pr-1">自动生成</span>
													</el-button>
												);
											}
										}}
									</el-input>
								</el-form-item>
								<el-form-item label="插件介绍" prop="remark">
									<el-input type="textarea" v-model={props.detail.remark} />
								</el-form-item>
								<el-form-item label="标签特征" prop="tags">
									<div class="flex items-center h-full">
										{props.detail.tags?.split(",").map((item: string) => {
											return item ? (
												<el-tag effect="plain" class="mr-2" size="small" hit>
													{item}
												</el-tag>
											) : null;
										})}
										{newTagState.visible ? (
											<el-input
												ref={addInputRef}
												v-model={newTagState.inputVal}
												size="small"
												onBlur={() => addTag()}
												placeholder="请输入标签"
											/>
										) : (
											<el-button
												size="small"
												onClick={() => {
													newTagState.visible = true;
													newTagState.inputVal = "";
													addInputRef.value?.focus();
												}}
											>
												添加标签
											</el-button>
										)}
									</div>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</DialogBox>
			);
		};
	}
});
